<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/upload.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script src="./js/laydate.js"></script>
    <script src="./js/upload.js"></script>
    <style>
        #progress_bar {
            margin: 10px 0;
            padding: 3px;
            border: 1px solid #000;
            font-size: 14px;
            clear: both;
            opacity: 0;
            transition: opacity 1s linear;
        }

        #progress_bar.loading {
            opacity: 1.0;
        }

        #progress_bar .percent {
            background-color: #99ccff;
            height: auto;
            width: 0;
        }
    </style>
    <title>添加作业</title>
</head>

<body>
<c:if test="${user.type == \"TEACHER\"}">
    <div class="container">
        <!-- page-header -->
        <a href="${pageContext.request.contextPath}/index.jsp" type="button" class="btn btn-info" aria-label="Left Align">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            返回
        </a>

        <hr style="border: 1px solid #ddd;">

        <form enctype="multipart/form-data" action="${pageContext.request.contextPath}/uploadServlet" class="form-horizontal" method="post">
            <div class="form-group">
                <label for="inputTitle" class="col-sm-2 control-label">作业标题</label>
                <div class="col-sm-10">
                    <input name="title" type="text" class="form-control" id="inputTitle" placeholder="请输入作业标题">
                </div>
            </div>

            <div class="form-group">
                <label for="" class="col-sm-2 control-label">结束时间</label>
                <div class="col-sm-5">
                    <input name="end_day" type="text" class="form-control" id="endDateDay" placeholder="请选择日期">
                </div>
                <div class=" col-sm-5">
                    <input name="end_time" type="text" class="form-control" id="endDateTime" placeholder="请选择时间">
                </div>
            </div>

            <!-- 文件 -->
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10 col-md-7">
                    <div class="upload" id="doc1">
                        <!-- 隐藏默认样式 -->
                        <input name="files" type="file" multiple>
                        <button class="btn btn-info" type="button">点击上传</button>
                        <p><span>建议文件大小不超过100M</span></p>
                        <div class="file-name"></div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="inputTitle" class="col-sm-2 control-label">描述</label>
                <div class="col-sm-10">
                    <textarea name="textarea" style="resize: vertical;" class="form-control" rows="4"
                              placeholder="请描述题目内容（可选）"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <input type="submit" id="submitRealEl" style="display: none">
                    <button onclick="addHandle()" type="button" class="btn btn-warning">添加</button>
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">清空</button>
                </div>
            </div>
        </form>

        <!-- model -->
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">清空此次编辑</h4>
                    </div>
                    <div class="modal-body">
                        <span>这将会完全清空页面内容，你确定吗</span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button onclick="clearHandle()" type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // type 控件选择器  默认值为date
        // year 年份选择器 只提供年列表选择
        // month（年月选择器）只提供年、月选择
        // date（日期选择器）可选择：年、月、日。type默认值，一般可不填
        // time （时间选择器）只提供时、分、秒选择
        // datetime（日期时间选择器）可选择：年、月、日、时、分、秒
        laydate.render({
            elem: '#endDateDay',
            type: 'date',//默认为date
            trigger: 'click'//默认为click，即点击后出现日历框
        });

        laydate.render({
            elem: '#endDateTime',
            type: 'time',
            trigger: 'click',
        });

        upload('#doc1');

        $('#exampleModal').on('show.bs.modal', function (event) {
            const button = $(event.relatedTarget);
            const recipient = button.data('whatever');
            const modal = $(this);
            modal.find('.modal-title').text('New message to ' + recipient)
            modal.find('.modal-body input').val(recipient)
        });



        function addHandle() {
            const title = document.querySelector('input[name=title]');
            const endDay = document.querySelector('input[name=end_day]');
            const endTime = document.querySelector('input[name=end_time]');
            const files = document.querySelector('input[name=files]');
            const textarea = document.querySelector('textarea[name=textarea]');

            if(title.value === ''){
                alert('作业标题不能为空');
            }else if(endDay.value === '' || endTime.value === ''){
                alert('时间不能为空');
            }else if(files.files.length === 0){
                alert('没有上传文件');
            }else{
                document.querySelector('#submitRealEl').click();

                alert('添加成功');
            }
        }

        function clearHandle() {
            delete window.uploadFiles;
            const inputs = document.querySelectorAll('input');

            inputs.forEach(item => {
                item.value = '';
            });

            document.querySelector('textarea').value = '';
        }
    </script>
    <script>
        //文件读取
        function __temp() {
            let reader;
            // 显示进度
            const progress = document.querySelector('.percent');

            function abortRead() {
                reader ? reader.abort() : null;
            }

            // 文件上传出错后的函数
            function errorHandler(e) {
                switch (e.target.error.code) {
                    case e.target.error.NOT_FOUND_ERR:
                        alert('文件没找到');
                        break;
                    case e.target.error.NOT_READABLE_ERR:
                        alert('文件不可读');
                        break;
                    case e.target.error.ABORT_ERR:
                        break;
                    default:
                        alert('读取文件时出错');
                };
            }
            // 更新进度条
            function updateProgress(e) {
                // e 是一个 ProgressEvent.
                if (e.lengthComputable) {
                    var percentLoaded = Math.round((e.loaded / e.total) * 100);
                    // 更新进度条长度
                    if (percentLoaded < 100) {
                        progress.style.width = percentLoaded + '%';
                        progress.textContent = percentLoaded + '%';
                    }
                }
            }
            // 选择上传文件后的方法
            function handleFileSelect(e) {
                if (e.target.files[0]) {
                    // 在选择新文件后重置进度指示器
                    progress.style.width = '0%';
                    progress.textContent = '0%';

                    reader = new FileReader();

                    reader.onerror = errorHandler;
                    reader.onprogress = updateProgress;
                    reader.onloadstart = function (e) {
                        document.getElementById('progress_bar').className = 'loading';
                    };
                    reader.onload = function (e) {
                        // 确保进度条最后显示100％
                        progress.style.width = '100%';
                        progress.textContent = '100%';


                    }

                    // 将文件作为二进制字符串读入
                    reader.readAsBinaryString(e.target.files[0]);
                } else {
                    document.getElementById('progress_bar').removeAttribute('class')
                }
            }

            document.getElementById('files').addEventListener('change', handleFileSelect, false);
        }
    </script>
</c:if>
<c:if test="${user.type != \"TEACHER\"}">
    <div class="container">
        <span>对不起，您的权限不足</span>
        <a href="${pageContext.request.contextPath}/index.jsp"><span>返回主页</span></a>
    </div>
</c:if>
</body>

</html>